<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>配置项calendar-日历坐标系</title>
  <script src="./echarts.js"></script>
  <style lang="css">
    #chart1 {
      width: 100%;
      height: 650px;
      /* border: 1px solid red; */
      float: left;
    }
  </style>
</head>

<body>
  <div id="chart1"></div>

  <script>
    // ['2016-01-01', 9000]
    function getData (year = 2017) {
      let d = new Date(2008, 7, 31)

      function getEndDay(year, month) { // 获取某个月最后一天是几号, 第二个参数你要几月就写几月不需要加减一
        return new Date(year, month, 0).getDate()
      }

      let data = []
      let days // 某个月最后一天的日期值
      for (let i = 1; i <= 12; i++) { // 循环12个月
        days = getEndDay(year, i) // 存储每个月的天数
        for (let j = 1; j <= days; j++) { // 循环每个月的天数
          data.push([`${year}-${i}-${j}`, Math.floor(Math.random() * 10000)])
        }
      }
      return data
    }

    console.log(getData(2016))
    const myChart1 = echarts.init(document.getElementById('chart1'));

    myChart1.setOption({
      title: {
        text: '2016年某人每天步数',
        left: 'center',
        top: 30,
        textStyle: {
          fontSize: 20,
        }
      },
      tooltip: {},
      visualMap: {
        show: true,
        type: 'piecewise',
        min: 0,
        max: 10000,
        orient: 'horizontal',
        left: 'center',
        top: 65,
        textStyle: {
          color: '#000',
          fontSize: 14,
        },
      },
      calendar: [ // 日历坐标系
        {
          range: '2016',
          top: 120,
          left: 50,
          right: 100, // 不给右边，日历横向显示不全
          // range: '2016-02',
          // range: ['2016-01-02', '2017-02-23'],
          range: 2016,
          cellSize: 20,
          cellSize: [40, 40],
          // cellSize: ['auto', 40],
          orient: 'horizontal',
          splitLine: {
            show: true,
            lineStyle: {
              color: 'blue',
              width: 2,
              type: 'solid'
            }
          },
          itemStyle: {
            color: 'green',
            // borderColor: 'blue',
            borderWidth: 2,
          },
          dayLabel: {
            firstDay: 1, // 一周开始日
            nameMap: 'cn', // en | cn
            color: 'red',
            margin: 20,
            fontSize: 14,
            position: 'start',
            formatter: function (value) {
              return value.replace('日', '')
            }
          },
          monthLabel: {
            align: 'center',
            nameMap: 'cn',
            color: 'red',
            margin: 10,
            fontSize: 14,
            position: 'start',
            formatter: '{MM}月',
            // formatter: function (param) {
            //   return param.yyyy + '年' + param.MM + '月'
            // }
          },
          yearLabel: {
            show: true,
            margin: 10,
            position: 'bottom',
            formatter: '{nameMap}年'
          }
        }
      ],
      series: [
        {
          type: 'heatmap',
          coordinateSystem: 'calendar',
          data: getData(2016)
        }
      ],
    })
  </script>
</body>

</html>